<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../js/dropdown/dropdown.css">

    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />


</head>

<body>
    <header class="navbar clearfix" id="header">
    </header>

    <!-- PAGE -->
    <section id="page">
        <!-- SIDEBAR -->
        <div id="sidebar" class="sidebar">
            <div class="sidebar-menu nav-collapse">

                <!-- SIDEBAR MENU -->
                <ul>

                </ul>
                <!-- /SIDEBAR MENU -->
            </div>

        </div>
        <!-- /SIDEBAR -->
        <div id="main-content">
            
            <div class="container">
                <div class="row">
                    <div id="content" class="col-lg-12">
                        <!-- PAGE HEADER-->
                        <div class="row" style="height: 30px;">
                            <div class="col-sm-12">
                                <div class="page-header">
                                    <!-- STYLER -->

                                    <!-- /STYLER -->
                                    <!-- BREADCRUMBS -->
                                    <ul class="breadcrumb">
                                        <li>
                                            <i class="fa fa-home"></i>
                                            <a href="../index.html">首页</a>
                                        </li>
                                        <li>
                                            <a href="#">商品管理</a>
                                        </li>
                                        <li>商品款式</li>
                                    </ul>
                                    <!-- /BREADCRUMBS -->

                                </div>
                            </div>
                        </div>
                        <!-- /PAGE HEADER -->
                       

                 
                            <div class="row col-md-12 ">
                                <label class="control-label col-md-2">分类：</label>
                                <div class="col-md-3">
                                    <select class="form-control" id="category1_select">
															 			<option>请选择一级分类</option>
															 			
															 		    </select>
                                </div>
                                <div class="col-md-3">
                                    <select class="form-control" id="category2_select">
												 						<option>请选择二级分类</option>												 						
												 						</select>
                                </div>
                                <div class="col-md-3">
                                    <select class="form-control" name="categoryId" id="category3_select">
												 			             <option value="">请选择三级分类</option>
												 			           
												 		                </select>
                                </div>
                            </div>
                            <div class="row col-md-12 ">
                                <label class="control-label col-md-2"><span class="required">*</span>商品属性：</label>
                                <div class="basicAttributeList inline" style="margin-left: 10px;">


                                </div>
                            </div>
                            <div class="row col-md-12" style="margin-top:20px">
                                <label class="control-label col-md-2" style="line-height:34px;"><span class="required">*</span>名称：</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="groupName" placeholder="请输入款式名称" maxlength="20" />
                                    <input type="hidden" name="id" />

                                </div>
                            </div>
                            <div class="row  col-md-12">
                                <label class="control-label col-md-2">成衣价格：</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="skuprice" onkeypress="return $.IsDecimal(event);" onblur="return $.IsMoney(this);" placeholder="请输入单价" maxlength="20" />
                                </div>
                            </div>
                            <div class="row  col-md-12">
                                <label class="control-label col-md-2">包装袋：</label>
                                <div class="col-md-3">
                                    <select id="baozhuang_select" class="col-md-12 select2-offscreen" tabindex="-1">
									</select>
                                </div>
                            </div>
                            <div class="row  col-md-12">
                                <label class="control-label col-md-2">封口贴：</label>
                                <div class="col-md-3">
                                    <select id="fengkou_select" class="col-md-12 select2-offscreen" tabindex="-1">
									</select>
                                </div>
                            </div>
                            <div class="row divtiezhi  col-md-12">
                                <label class="control-label col-md-2">贴纸：</label>
                                <div class="col-md-10" style="display:inline-flex">
                                    <table class="table table-bordered tiezhi">
                                    </table>

                                </div>
                            </div>
                            <div class="row  col-md-12">
                                <label class="control-label col-md-2">总成本价：</label>
                                <div class="col-md-3">
                                    <lable name="costPrice" style="line-height:25px">0</lable>
                                </div>
                            </div>
                    <div class="row col-md-12" >
                        
                           
                            <button type="button" class="btn btn-success bt-save col-md-1" style="margin-left:400px">保存</button>
                       
                    </div>
            </div>
                    <!-- /CONTENT-->
 					</div>
                </div>
            
            <input type="hidden" name="groupId" />
    </section>

    <!--/PAGE -->
    <!-- JAVASCRIPTS -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- JQUERY -->
    <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
    <!-- JQUERY UI-->
    <script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
    <!-- BOOTSTRAP -->
    <script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

    <!-- BLOCK UI -->
    <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

    <!-- AUTOSIZE -->
    <script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>

    <!-- INPUT MASK -->
    <script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

    <!-- SELECT2 -->
    <script type="text/javascript" src="../../js/select2/select2.min.js"></script>
    <!-- UNIFORM -->
    <script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>


    <!-- spinner -->
    <script src="../../js/spinner/spin.js"></script>
    <!-- DATA TABLES -->
    <script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
    <script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
    <script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

    <!--bootbox-->
    <script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
    <!-- COOKIE -->
    <script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
    <!-- CUSTOM SCRIPT -->
    <script src="../../js/script.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        var Group = function() {
            var $mainDataTable = null;
            var type = null;
            var saveGroup = function() {
	             var basicAttribute = [];
	             $(".basicAttributeList").find("a[sel=on]").each(function(i) {
	        		basicAttribute.push($(this).html());
	              });
	              if(basicAttribute.length==0){
		                $.alert("请选择商品属性")
		                return ;
	              }
                if ($("input[name=groupName]").val() == "") {
                   $.alert("请输入款式名称")
                    return;
                } 
                
                    $.blockUI();
                       var group = {};
                   
                        var material = {};                     
                       
                        material.baozhuang = {
                            id: $("#baozhuang_select option:selected").val(),
                            price: $("#baozhuang_select option:selected").val()
                        };
                        material.fengkou = {
                            id: $("#fengkou_select option:selected").val(),
                            price: $("#fengkou_select option:selected").val()
                        };
                        material.tiezhi = [];
                        material.skuCost = $("[name=skuprice]").val();
                        var totalTiezhi = -1;
                        //循环贴纸
                        $(".tiezhitd").each(function() {
                            var t = {};
                            var p = $(this)[0].innerText.replace('*', '')
                            var a = $(this).find("input").val();
                            if (a != "") {
                                t.id = $(this).find("input").attr("id");
                                t.price = parseFloat(a) * parseInt(p);
                                t.amount = a;
                                totalTiezhi += parseInt(a);
                                material.tiezhi.push(t);
                            }
                        });
                        group.categoryId = $("#category3_select").val();

                        group.basicAttribute = basicAttribute.join(",");

                        group.extMaterial = JSON.stringify(material);
                        group.costPrice = $("[name=costPrice]").html();
                       
                       
                        if (group.categoryId == '') {
                            $.alert("请选择分类");
                            $.unblockUI();
                            return false;
                        }

                    
                    group.id = $("input[name=groupId]").val();
                    group.groupName = $("input[name=groupName]").val();
                    group.groupType = "Houtai";
                    $.ajax({
                        type: "post",
                        url: App.getContextPath() + "admin/group/saveGroup.do",
                        async: true,
                        data: {
                            strGroup: JSON.stringify(group)
                        },
                        success: function(result) {
                            $.unblockUI();
                            if (result.type == "error") {
                                $.alert(result.extra);
                            } else {
                               $.alert("保存成功");
                               window.location.href="group_list.html?type=Houtai";
                            }
                        }
                    });
               
            };

            

          

            var fengkou = "",
                tiezhi = "",
                baozhuang = "",
                num = 1;
            var getMaterial = function() {
                fengkou = "", tiezhi = "", baozhuang = "", num = 1;
                $.ajax({
                    type: "post",
                    url: App.getContextPath() + "admin/skumaterial/searchMaterialList.do",
                    async: true,
                    success: function(result) {
                        if (result.length > 0) {

                            var arr = [];

                            $.each(result, function(index, item) {
                                if (item.categoryName == '封口贴')
                                    fengkou += '<option value=' + item.id + ' price=' + item.price + '>' + item.price + "(" + item.materialName + ')</option>';
                                if (item.categoryName == '包装袋')
                                    baozhuang += '<option value=' + item.id + ' price=' + item.price + '>' + item.price + "(" + item.materialName + ')</option>';
                                if (item.categoryName == '贴纸') { //tiezhi+='<option value='+item.price+'>'+item.materialName+'</option>';
                                    arr.push(item);
                                }
                            });
                            if (baozhuang != "")
                                $("#baozhuang_select").empty().append(baozhuang).select2();
                            if (fengkou != "")
                                $("#fengkou_select").empty().append(fengkou).select2();

                            $("select").change(cumBaozhuang);

                            tiezhi = "<thead>";
                            for (var i = 0; i < arr.length; i++) {
                                tiezhi += '<th>' + arr[i].materialName + "</th>";
                            }
                            tiezhi += "</thead><tr>"
                            for (var i = 0; i < arr.length; i++) {
                                tiezhi += '<td class="tiezhitd"><table><tr><td class="tiezhiprice" >' + arr[i].price + "*</td><td><input type='text' class='form-control' id=" + arr[i].id + " maxlength='1' style='width:50px' onkeypress='return $.IsNum(event);' onblur='return $.IsNaN(this);' /></td></tr></table></td>";
                            }
                            tiezhi += "</tr>";
                            $(".tiezhi").empty().append(tiezhi);

                            $(".tiezhi").find("input").blur(cumBaozhuang);
                            $("[name=skuprice]").blur(cumBaozhuang);
                        }
                    }

                });
            }
            var cumBaozhuang = function() {
                var baozhuang = $("#baozhuang_select option:selected").attr("price");
                var fengkou = $("#fengkou_select option:selected").attr("price");
                var skuCost = $("[name=skuprice]").val();
                if (skuCost == "") skuCost = 0;
                var tiezhi = 0;
                $(".tiezhitd").each(function() {
                    var b = $(this)[0].innerText.replace('*', '');
                    var p = $(this).find("input").val();
                    if (p != "") {
                        tiezhi += parseFloat(b) * parseInt(p);
                    }
                });
                var total = parseFloat(baozhuang) + parseFloat(fengkou) + parseFloat(tiezhi) + parseFloat(skuCost);
                $("[name=costPrice]").html(total.toFixed(2));
            }

          
            var loadParentCategory = function() {
                $("#category2_select").empty().append('<option>请选择二级分类</option>');
                $("#category3_select").empty().append('<option>请选择三级分类</option>');
                $.ajax({
                    type: "get",
                    url: App.getContextPath() + "admin/product/getParentCategory.do",
                    async: false,
                    success: function(result) {
                        if (result.length > 0) {
                            var data = eval(result);
                            var option = "<option value=''>选择分类</option>";
                            $.each(data, function(index, item) {
                                option += "<option value='" + item.id + "'>" + item.categoryName + "</option>";
                            });
                            $("#category1_select").empty().append(option);
                            $('#category1_select').off("change").change(function() {
                                loadCategoryById($('#category1_select').val());
                            })
                        }
                    }
                });

            };
            var loadCategoryById = function(id) {
                $.ajax({
                    type: "get",
                    url: App.getContextPath() + "admin/product/getCategoryByParentId.do",
                    data: {
                        parentId: id
                    },
                    async: false,
                    success: function(result) {
                        if (result.length > 0) {
                            var data = eval(result);
                            var option = "";
                            $.each(data, function(index, item) {
                                option += "<option value='" + item.id + "'>" + item.categoryName + "</option>";
                            });
                            $("#category2_select").empty().append(option);
                            $("#category2_select").off("change").change(
                                function() {
                                    loadCategory3ById($('#category2_select').val());
                                });
                            $("#category2_select").get(0).selectedIndex = 0;
                            $("#category2_select").trigger("change");

                        }
                    }
                });
            };

            var loadCategory3ById = function(id) {
                $.ajax({
                    type: "get",
                    url: App.getContextPath() + "admin/product/getCategoryByParentId.do",
                    data: {
                        parentId: id
                    },
                    async: false,
                    success: function(result) {
                        if (result.length > 0) {
                            var data = eval(result);
                            var option = "";
                            $.each(data, function(index, item) {
                                option += "<option value='" + item.id + "'>" + item.categoryName + "</option>";
                            });
                            $("#category3_select").empty().append(option);
                        }
                    }

                });
            };

            //根据categoryId 获取父级信息
            var getParentsCategory = function(id) {

                $.ajax({
                    type: "get",
                    url: App.getContextPath() + "admin/product/getParentsByCategoryId.do",
                    data: {
                        categoryId: id
                    },
                    async: true,
                    success: function(result) {
                        if (result != null && result.length > 0) {
                            $("#category1_select").get(0).value = result[0].id;
                            $("#category1_select").trigger("change");

                            setTimeout(function() {
                                $("#category2_select").get(0).value = result[1].id;
                                $("#category2_select").trigger("change");
                                setTimeout(function() {
                                    $("#category3_select").get(0).value = result[2].id;
                                }, 300);
                            }, 300);
                        }
                    }
                });

            };
            var getHoutaiAttribute = function(id) {
                var str = "";
                $.ajax({
                    type: "get",
                    url: App.getContextPath() + "admin/attribute/findAttributeByParentId.do",
                    data: {
                        parentId: id
                    },
                    async: false,
                    success: function(result) {
                        if (result != null) {
                            if (result.extra.length > 0) {
                                tagsList = result.extra;
                               
                                var parentId;
                                
                                for(var i=0;i<tagsList.length;i++){                        
                               
                                if(tagsList[i].level==2){
                                  
                                 $(".basicAttributeList").append("<ul class='pager' style='text-align:left' id=d_"+tagsList[i].id+">"+tagsList[i].attributeName+"</ul>")
                                }
                                else{                                	
                                	 $("#d_"+tagsList[i].parentId).append("<li style='margin-left:10px'><a id=sub_"+tagsList[i].id+" href='javascript:;' sel='off'>"+tagsList[i].attributeName+"</a></li>")
                                	                         		
                                	}
                                	}
                                }
                                
                                
                                 $(".basicAttributeList").find("a").click(function(){
                                 if($(this).attr("sel")=='off'){
                                 	$(this).attr("sel","on");
                                 	$(this).css("color","red");
                                 }else{
                                 	$(this).attr("sel","off");
                                 	$(this).css("color","#5e87b0");
                                 }
                                 })
                            }
                        }
                    
                });

            };
            var getGroupId=function(){
            		 $.ajax({
                    type: "get",
                    url: App.getContextPath() + "admin/group/getGroupById.do",
                    data: {
                        id: $("[name=groupId]").val()
                    },
                    async: false,
                    success: function(result) {
                        if (result.extra != null) {
                        result=result.extra;
                        	getParentsCategory(result.categoryId);
                        	var basicAttr=result.basicAttribute.split(",");
                        
                        	for(var i=0;i<tagsList.length;i++){
                        	if(basicAttr.indexOf(tagsList[i].attributeName)>-1){
                        		$("#sub_"+tagsList[i].id).trigger("click");
                        	}
                        	}
                        	$("input[name=groupName]").val(result.groupName);
                        	var ext = result.extMaterial;
                                if (ext != "") {
                                    var m = JSON.parse(ext);
                                    if (typeof m.baozhuang != "undefined")
                                        $("#baozhuang_select").select2("val", m.baozhuang.id);
                                    if (typeof m.fengkou != "undefined")
                                        $("#fengkou_select").select2("val", m.fengkou.id);
                                    $("[name=skuprice]").val(m.skuCost);
                                    $.each(m.tiezhi, function(index, item) {
                                        $(".tiezhi").find("input[id=" + item.id + "]").val(item.amount);
                                    });
                                }
                                cumBaozhuang();
                        }
                      }
                      });
                      
                        
            }
            var id;
            return {
                init: function() {
                    getHoutaiAttribute(15);
                    $(".bt-save").click(saveGroup);
                    loadParentCategory();
                    getMaterial();
                   
                    if($.getUrlParam("flag")=="edit"){
                   	  $("[name=groupId]").val($.getUrlParam("id"));
                      getGroupId();
                    }
                    

                }

            }
        }();

        $(function() {
            $("#header").load("../head.html");
            App.init();
            Group.init();

        });
    </script>
    <!-- /JAVASCRIPTS -->
</body>

</html>